<template>
    <layout>
        <mt-header title="做题练习">
            <a href="javascript:window.history.go(-1);" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <div class="title-box">
            <div class="t-top"><div class="number">{{ currentIndex + 1 }}</div>/{{ totalCount }}</div>
            <div class="t-tile" v-html="current.content">{{ current.content }}</div>



            <ul class="t-list">
                <li v-for="(item, index) in current.choiceDTOs" :class="{'active': option == item.id}" @click="choice(item.id)">
                    <span class="title">{{item.serialNumber}}</span>
                    <div class="react" v-html="item.content"></div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="btn" :class="{'active': currentIndex != 0}" @click="last">上一题</div>
            <div class="btn active" @click="next" v-show="totalCount != currentIndex + 1">下一题</div>
            <div class="btn active" @click="submit" v-show="totalCount == currentIndex + 1">提交</div>
        </div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
    * {
        margin: 0;
        padding: 0
    }

    img {
        border: none
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    td,
    th,
    div {
        word-break: break-all;
        word-wrap: break-word
    }

    ol,
    ul {
        list-style: none
    }

    .wrapper {
        margin: 15px auto;
        width: 960px;
        min-height: 470px
    }

    .clearfix:after {
        content: "";
        display: table;
        clear: both
    }

    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    a {
        text-decoration: none
    }

    body {
        font: 14px Arial, SimSun
    }

    .MathJye table {
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        text-align: center;
        vertical-align: middle;
        line-height: normal;
        font-size: inherit;
        _font-size: 100%;
        font-style: normal;
        font-weight: normal;
        border: 0;
        float: none;
        display: inline-block;
        zoom: 0;
    }

    table.edittable {
        border-collapse: collapse;
        text-align: center;
        margin: 2px
    }

    table.edittable td,
    table.edittable th {
        line-height: 30px;
        padding: 5px;
        white-space: normal;
        word-break: break-all;
        border: 1px solid #000;
        vertical-align: middle
    }

    table.composition {
        border-collapse: collapse;
        text-align: left;
        margin: 2px;
        width: 98%
    }

    table.composition td,
    table.composition th {
        line-height: 30px;
        white-space: normal;
        word-break: break-all;
        border-width: 0;
        vertical-align: middle
    }

    table.composition2 {
        border-collapse: collapse;
        width: auto
    }
    .react{
        float: left;
        height: 100%;
        text-align:center;vertical-align:middle;
        li{
            height: auto!important;
            border: none;
            margin: 0;
            text-align:center;vertical-align:middle;

        }
    }
    table.composition2 td,
    table.composition2 th {
        text-align: left;
        line-height: 30px;
        white-space: normal;
        word-break: break-all;
        border: none;
        border-width: 0;
        vertical-align: middle
    }


</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);
    export default {
        components: {
            Layout
        },
        data(){
            return {
                currentIndex: 0,
                current: {},
                option: '',
                totalCount: 0,
                record: []
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        watch: {
            currentIndex: function(){
                this.current = this.questions[this.currentIndex];
            }
        },
        methods: {
            choice(id){
                this.option = id;

                //将当前题选择的答案放入
                this.record[this.currentIndex] = {
                    option: this.option,
                    id: this.current.id
                }
            },
            last(){
                if (this.currentIndex != 0){
                    //取出上一题
                    this.currentIndex = this.currentIndex - 1;
                    let item = this.record[this.currentIndex];
                    this.option = item.option;
                }
            },
            next(){
                if (!this.option){
                    Mint.Toast('请选择选项');
                    return;
                }

                if (this.currentIndex < this.totalCount - 1){
                    //取出下一题的数据
                    this.currentIndex = this.currentIndex + 1;
                    let item = this.record[this.currentIndex];
                    this.option = item.option;
                }
            },
            submit(){
                if (!this.option){
                    Mint.Toast('请选择选项');
                    return;
                }
                Mint.Indicator.open()
                let params = new URLSearchParams();
                params.append("type", this.type);
                params.append("courseId", this.courseId);

                console.log(JSON.stringify(this.record));
                params.append("choiceStringJson", JSON.stringify(this.record));

                this.$http.post('/api/practice/submit', params)
                    .then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                Mint.Toast('提交成功');
                                window.location.href = `/study/practice/result?id=${data.data.id}`;
                            }
                        }else{
                            Mint.Toast('提交失败');
                        }

                        Mint.Indicator.close()
                    });
            }
        },
        mounted() {
            if (this.questions && this.questions.length > 0){
                this.totalCount = this.questions.length;
                this.current = this.questions[this.currentIndex];

                for (let i = 0; i < this.totalCount; i++){
                    this.record.push({
                        id: this.questions[i].id,
                        option: ''
                    });
                }

            }
        }
    }
</script>

